<template>
	<view class="container">
		<!-- 渐变顶部装饰 -->
		<view class="header-bg"></view>

		<!-- 主内容区 -->
		<view class="main-wrapper">
			<!-- 标题区域 -->
			<view class="title-group">
				<text class="title-main">搭子星球</text>
				<view class="subtitle-wrapper">
					<text class="title-sub">找到志同道合的TA，一起探索美好生活</text>
				</view>
			</view>

			<!-- 登录方式切换 -->
			<view class="tab-container">
				<view :class="['tab-item', loginType === 'account' ? 'active' : '']"
					@click="switchLoginType('account')">
					账号密码登录
				</view>
				<view :class="['tab-item', loginType === 'mobile' ? 'active' : '']" @click="switchLoginType('mobile')">
					手机验证码登录
				</view>
			</view>

			<!-- 3D瓷片区表单卡片 - 使用scroll-view支持纵向滑动 -->
			<scroll-view class="card-wrapper" scroll-y show-scrollbar="false" :enhanced="true" bounces="true">
				<view class="card-form">
					<!-- 账号密码登录表单 -->
					<template v-if="loginType === 'account'">
						<view class="form-item">
							<text class="label">账号/手机号</text>
							<input v-model="form.account" type="text" placeholder="请输入账号或手机号" class="input-field"
								placeholder-style="color: #999;" />
						</view>

						<view class="form-item">
							<text class="label">密码</text>
							<input v-model="form.password" type="password" placeholder="请输入密码" class="input-field"
								placeholder-style="color: #999;" />
						</view>

						<!-- 记住密码 + 忘记密码 -->
						<view class="options-row">
							<view class="checkbox-wrapper">
								<checkbox :checked="form.remember" @change="toggleRemember" class="checkbox"
									shape="circle" />
								<text class="checkbox-label">记住密码</text>
							</view>
							<text class="forget-password" @click="navigateToReset">
								忘记密码？
							</text>
						</view>
					</template>

					<!-- 手机验证码登录表单 -->
					<template v-else>
						<view class="form-item">
							<text class="label">手机号</text>
							<input v-model="form.mobile" type="number" placeholder="请输入手机号" class="input-field"
								placeholder-style="color: #999;" maxlength="11" />
						</view>

						<view class="form-item">
							<text class="label">验证码</text>
							<view class="code-input-wrapper">
								<input v-model="form.code" type="number" placeholder="请输入验证码"
									class="input-field code-input" placeholder-style="color: #999;" maxlength="6" />
								<button class="btn-get-code" :disabled="countdown > 0" @click="getVerificationCode">
									{{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
								</button>
							</view>
						</view>
					</template>

					<!-- 登录按钮 -->
					<button class="btn-login" @click="handleLogin" :disabled="!form.agree" type="primary">登录</button>

					<!-- 微信登录 -->
					<!-- #ifdef MP-WEIXIN -->
					<button class="wechat-login" @click="handleWechatLogin" type="default">
						<image src="/static/common/fire.png" class="wechat-icon" mode="aspectFit"></image>
						<text>微信一键登录</text>
					</button>
					<!-- #endif -->

					<!-- 用户协议 -->
					<view class="agreement-row">
						<view class="checkbox-wrapper agree-checkbox">
							<checkbox :checked="form.agree" @change="toggleAgree" class="checkbox" shape="circle" />
						</view>
						<text class="agree-text">
							登录即表示同意
							<text class="link" @click="navigateToAgreement">《用户协议》</text>
							和
							<text class="link" @click="navigateToPrivacy">《隐私政策》</text>
						</text>
					</view>

					<!-- 注册引导 -->
					<view class="register-tip">
						<text>还没有账号？</text>
						<text class="register-link" @click="navigateToRegister">立即注册</text>
					</view>

					<!-- 底部占位，避免内容与版权信息重合 -->
					<view class="bottom-spacer"></view>
				</view>
			</scroll-view>
		</view>

		<!-- 版权信息 - 固定在底部 -->
		<view class="footer">
			<text>© 2023 搭子星球 版权所有</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onUnmounted
	} from 'vue';

	// 登录类型状态管理
	const loginType = ref('account');
	const countdown = ref(0);
	let timer = null;

	// 表单数据
	const form = ref({
		account: '',
		password: '',
		mobile: '',
		code: '',
		remember: false,
		agree: true,
		focused: ''
	});

	// 切换登录方式
	const switchLoginType = (type) => {
		loginType.value = type;
		// 清除之前的输入焦点
		form.value.focused = '';
	};

	// 切换记住密码
	const toggleRemember = (e) => {
		form.value.remember = e.detail.checked;
	};

	// 切换协议同意状态
	const toggleAgree = (e) => {
		form.value.agree = e.detail.checked;
	};

	// 导航到注册页
	const navigateToRegister = () => {
		uni.navigateTo({
			url: '/pages/register/register'
		});
	};

	// 导航到忘记密码页
	const navigateToReset = () => {
		uni.navigateTo({
			url: '/pages/reset-password/reset-password'
		});
	};

	// 导航到用户协议页
	const navigateToAgreement = () => {
		uni.navigateTo({
			url: '/pages/user-agreement/user-agreement'
		});
	};

	// 导航到隐私政策页
	const navigateToPrivacy = () => {
		uni.navigateTo({
			url: '/pages/privacy-policy/privacy-policy'
		});
	};

	// 获取验证码
	const getVerificationCode = () => {
		// 验证手机号格式
		const phoneRegex = /^1[3-9]\d{9}$/;
		if (!form.value.mobile) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
			return;
		}
		if (!phoneRegex.test(form.value.mobile)) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			});
			return;
		}

		// 开始倒计时
		countdown.value = 60;
		timer = setInterval(() => {
			if (countdown.value > 1) {
				countdown.value--;
			} else {
				clearInterval(timer);
				countdown.value = 0;
			}
		}, 1000);

		// 模拟发送验证码
		uni.showToast({
			title: '验证码已发送',
			icon: 'none'
		});
	};

	// 处理登录
	const handleLogin = () => {
		if (!form.value.agree) {
			uni.showToast({
				title: '请阅读并同意用户协议',
				icon: 'none'
			});
			return;
		}

		if (loginType.value === 'account') {
			// 账号密码登录验证
			if (!form.value.account) {
				uni.showToast({
					title: '请输入账号',
					icon: 'none'
				});
				return;
			}
			if (!form.value.password) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				});
				return;
			}
		} else {
			// 手机验证码登录验证
			const phoneRegex = /^1[3-9]\d{9}$/;
			if (!form.value.mobile || !phoneRegex.test(form.value.mobile)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return;
			}
			if (!form.value.code || form.value.code.length !== 6) {
				uni.showToast({
					title: '请输入6位验证码',
					icon: 'none'
				});
				return;
			}
		}

		// 显示登录中状态
		uni.showLoading({
			title: '登录中...'
		});

		// 模拟登录请求
		setTimeout(() => {
			uni.hideLoading();
			uni.showToast({
				title: '登录成功',
				icon: 'success'
			});

			// 登录成功后跳转到首页
			setTimeout(() => {
				// uni.switchTab({url: '/pages/index/index' });
				uni.reLaunch({url: '/pages/index_page' });
			}, 1500);
		}, 1500);
	};

	// 微信登录
	const handleWechatLogin = () => {
		if (!form.value.agree) {
			uni.showToast({
				title: '请阅读并同意用户协议',
				icon: 'none'
			});
			return;
		}

		// #ifdef MP-WEIXIN
		// 微信小程序环境调用原生登录
		uni.login({
			provider: 'weixin',
			success: (res) => {
				if (res.code) {
					uni.showLoading({
						title: '登录中...'
					});
					// 这里可以将code发送到后端换取openid等信息
					setTimeout(() => {
						uni.hideLoading();
						uni.showToast({
							title: '微信登录成功',
							icon: 'success'
						});
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							});
						}, 1500);
					}, 1500);
				}
			},
			fail: (err) => {
				uni.showToast({
					title: '微信登录失败',
					icon: 'none'
				});
				console.error('微信登录失败:', err);
			}
		});
		// #else
		// 非微信环境提示
		uni.showToast({
			title: '请在微信小程序中使用此功能',
			icon: 'none'
		});
		// #endif
	};

	// 页面卸载时清除定时器
	onUnmounted(() => {
		if (timer) {
			clearInterval(timer);
		}
	});
</script>

<style scoped lang="scss">
	/* 设计基准：750rpx */
	$bg-color: #f9f9f9;
	$primary: #7c3aed; // 主色调改为紫色
	$secondary: #ff6b6b; // 辅助色
	$text-dark: #333;
	$text-gray: #666;
	$text-light: #999;
	$border-color: #e5e5e5;
	$shadow-light: rgba(0, 0, 0, 0.08);
	$shadow-strong: rgba(0, 0, 0, 0.12);
	$white: #ffffff;
	$wechat-green: #2a9c5f;

	// 全局重置和通用样式
	* {
		box-sizing: border-box;
		-webkit-tap-highlight-color: transparent;
	}

	.container {
		width: 100%;
		max-width: 750rpx;
		height: 100vh;
		background-color: $bg-color;
		position: relative;
		overflow: hidden;
		margin: 0 auto;
		// 增加安全区域适配
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	/* 顶部弧形渐变背景 */
	.header-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 380rpx;
		background: linear-gradient(135deg, #ede5ff, #d9caff);
		border-bottom-left-radius: 60% 20%;
		border-bottom-right-radius: 60% 20%;
		z-index: 1;
		// 添加光晕效果
		box-shadow: 0 0 100rpx rgba($primary, 0.1);
	}

	/* 主体内容 */
	.main-wrapper {
		position: relative;
		z-index: 2;
		padding: 120rpx 60rpx 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: calc(100vh - 120rpx);
		/* 留出更多底部版权信息的空间 */
		box-sizing: border-box;
	}

	/* 标题组 */
	.title-group {
		text-align: center;
		margin-bottom: 80rpx;
		width: 100%;
		position: relative;
	}

	.title-main {
		font-size: 68rpx;
		font-weight: bold;
		color: $primary;
		line-height: 1.2;
		letter-spacing: 2rpx;
		text-shadow: 0 4rpx 12rpx rgba($primary, 0.15);
		display: inline-block;
	}

	.subtitle-wrapper {
		margin-top: 20rpx;
		width: 100%;
	}

	.title-sub {
		font-size: 26rpx;
		color: $text-gray;
		line-height: 1.4;
		display: block;
		text-align: center;
		word-wrap: break-word;
		padding: 0 20rpx;
	}

	/* 标签页切换 */
	.tab-container {
		display: flex;
		width: 630rpx;
		height: 90rpx;
		background-color: rgba(255, 255, 255, 0.7);
		border-radius: 45rpx;
		overflow: hidden;
		margin-bottom: 60rpx;
		box-shadow: 0 6rpx 16rpx $shadow-light;
		backdrop-filter: blur(10rpx);
		// 增加触摸反馈
		transition: transform 0.2s ease;
	}

	.tab-container:active {
		transform: scale(0.98);
	}

	.tab-item {
		flex: 1;
		text-align: center;
		line-height: 90rpx;
		font-size: 30rpx;
		color: $text-gray;
		transition: all 0.3s ease;
		font-weight: 500;
		position: relative;
		overflow: hidden;
	}

	.tab-item.active {
		color: $white;
		background-color: $primary;
		box-shadow: 0 0 20rpx rgba($primary, 0.3);
		transform: scale(1.02);
	}

	/* 滚动容器 */
	.card-wrapper {
		width: 630rpx;
		flex: 1;
		margin-bottom: 20rpx;
		position: relative;
		height: 950rpx;
		/* 固定高度 */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;

		// 添加底部装饰光效
		&::after {
			content: '';
			position: absolute;
			bottom: -20rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 500rpx;
			height: 40rpx;
			background: radial-gradient(circle, rgba($primary, 0.15) 0%, transparent 70%);
			filter: blur(20rpx);
			z-index: -1;
		}
	}

	/* 表单卡片 - 3D瓷片区核心 - 增强3D效果 */
	.card-form {
		width: 100%;
		min-height: 950rpx;
		background-color: $white;
		border-radius: 24rpx;
		box-shadow: 0 20rpx 60rpx rgba(124, 58, 237, 0.15);
		padding: 60rpx 50rpx 70rpx;
		box-sizing: border-box;
		transform-style: preserve-3d;
		// 移除可能影响输入框的3D变换
		transform: translateY(-10rpx);
		transition: all 0.3s ease;
		position: relative;
		overflow: visible;
		// 移除可能影响输入框的动画
	}

	/* 添加3D装饰效果 */
	.card-form::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 8rpx;
		background: linear-gradient(90deg, $primary, $secondary);
		transform: translateZ(1rpx);
	}

	.card-form::after {
		content: '';
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 120rpx;
		height: 120rpx;
		background: radial-gradient(circle, rgba($primary, 0.1) 0%, transparent 70%);
		border-radius: 50%;
		transform: translateZ(1rpx);
	}

	/* 输入项 */
	.form-item {
		margin-bottom: 50rpx;
		position: relative;
		transform: translateZ(50rpx);
	}

	.label {
		display: block;
		font-size: 28rpx;
		color: $text-dark;
		margin-bottom: 16rpx;
		font-weight: 500;
	}

	/* 输入框样式 - 优化多端兼容性 */
	.input-field {
		width: 100%;
		height: 110rpx;
		padding: 0 30rpx;
		border: 2rpx solid $border-color;
		border-radius: 16rpx;
		font-size: 30rpx;
		color: $text-dark;
		background-color: $white;
		box-sizing: border-box;
		transition: all 0.3s ease;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		// 修复输入框聚焦变形问题
		will-change: transform;
	}

	.input-field:focus,
	.input-field:focus-within {
		border-color: $primary;
		box-shadow: 0 0 0 8rpx rgba($primary, 0.1);
		outline: none;
	}

	/* 验证码输入区域 */
	.code-input-wrapper {
		display: flex;
		gap: 20rpx;
		align-items: center;
		width: 100%;
		height: 110rpx;
	}

	.code-input {
		flex: 1;
		height: 100%;
	}

	/* 获取验证码按钮 */
	.btn-get-code {
		height: 110rpx;
		padding: 0 30rpx;
		background-color: $white;
		color: $primary;
		border: 2rpx solid $primary;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-weight: 500;
		transition: all 0.3s ease;
		min-width: 200rpx;
		line-height: 110rpx;
		// 修复按钮默认样式
	}

	.btn-get-code::after {
		border: none;
		border-radius: 16rpx;
	}

	.btn-get-code:not(:disabled) {
		background-color: $white;
		color: $primary;
	}

	.btn-get-code:not(:disabled):active {
		background-color: $primary;
		color: $white;
	}

	.btn-get-code:disabled {
		opacity: 0.6;
		border-color: $text-light;
		color: $text-light;
	}

	/* 选项行 */
	.options-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		color: $text-gray;
		margin-bottom: 50rpx;
		transform: translateZ(50rpx);
		width: 100%;
	}

	.checkbox-wrapper {
		display: flex;
		align-items: center;
	}

	/* 复选框样式调整 - 增强一致性 */
	.checkbox {
		transform: scale(0.8);
	}

	checkbox .wx-checkbox-input {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		border: 2rpx solid $border-color;
	}

	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background-color: $primary;
		border-color: $primary;
	}

	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		color: $white;
		font-size: 20rpx;
	}

	.checkbox-label {
		font-size: 26rpx;
		color: $text-gray;
		margin-left: 8rpx;
	}

	.forget-password {
		color: $primary;
		font-weight: 500;
		font-size: 26rpx;
	}

	/* 登录按钮 - 增强渐变效果 */
	.btn-login {
		width: 100%;
		height: 104rpx;
		background: linear-gradient(135deg, $primary, #9d65f9);
		color: $white;
		font-size: 32rpx;
		font-weight: bold;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 10rpx 30rpx rgba($primary, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		border: none;
		letter-spacing: 4rpx;
		line-height: 104rpx;
		// 修复按钮默认样式
	}

	.btn-login::after {
		border: none;
		border-radius: 20rpx;
	}

	.btn-login:not(:disabled):active {
		transform: translateY(-2rpx);
		box-shadow: 0 16rpx 40rpx rgba($primary, 0.4);
	}

	.btn-login:disabled {
		opacity: 0.6;
		transform: translateZ(60rpx);
	}

	/* 微信登录 */
	.wechat-login {
		width: 100%;
		height: 104rpx;
		background-color: #e6f7ef;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: $wechat-green;
		font-size: 30rpx;
		margin-bottom: 40rpx;
		transition: all 0.3s ease;
		line-height: 104rpx;
		// 修复按钮默认样式
	}

	.wechat-login::after {
		border: none;
		border-radius: 20rpx;
	}

	.wechat-login:active {
		background-color: #d6f0e3;
		transform: translateY(-2rpx);
	}

	.wechat-icon {
		width: 44rpx;
		height: 44rpx;
		margin-right: 16rpx;
	}

	/* 协议行 - 优化布局 */
	.agreement-row {
		display: flex;
		align-items: flex-start;
		font-size: 24rpx;
		color: $text-gray;
		margin-bottom: 40rpx;
		line-height: 1.6;
		transform: translateZ(40rpx);
		flex-wrap: wrap;
		padding-top: 4rpx;
		width: 100%;
	}

	.agree-checkbox {
		margin-right: 8rpx;
	}

	.agree-text {
		flex: 1;
		word-break: break-word;
		font-size: 22rpx;
		line-height: 1.5;
		min-width: 0;
	}

	.link {
		color: $primary;
		font-weight: 500;
		// 增加点击区域
		padding: 4rpx 2rpx;
		display: inline-block;
	}

	/* 注册提示 */
	.register-tip {
		display: flex;
		justify-content: center;
		font-size: 26rpx;
		color: $text-gray;
		margin-top: 20rpx;
		transform: translateZ(40rpx);
		white-space: nowrap;
	}

	/* 底部占位元素 */
	.bottom-spacer {
		height: 80rpx;
		width: 100%;
		transform: translateZ(40rpx);
	}

	.register-link {
		color: $primary;
		margin-left: 10rpx;
		font-weight: 600;
		font-size: 26rpx;
		// 增加点击区域
		padding: 4rpx 2rpx;
		display: inline-block;
	}

	/* 版权信息 - 固定在底部 */
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		max-width: 750rpx;
		padding: 20rpx 0;
		text-align: center;
		font-size: 24rpx;
		color: $text-light;
		background-color: transparent;
		z-index: 100;
		// 确保在安全区域内显示
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom, 0));
		// 确保在安卓设备上可见
		min-height: 60rpx;
		clear: both;
	}

	/* 响应式适配 */
	@media screen and (device-width: 375px) {
		.card-wrapper {
			width: 600rpx;
		}

		.tab-container {
			width: 600rpx;
		}
	}

	/* 动画效果 - 简化以避免影响输入框 */
	@keyframes float {

		0%,
		100% {
			transform: translateY(-10rpx);
		}

		50% {
			transform: translateY(-18rpx);
		}
	}

	/* 输入框聚焦时的卡片效果变化 */
	.card-form:focus-within {
		transform: translateY(-15rpx);
		box-shadow: 0 25rpx 70rpx rgba(124, 58, 237, 0.2);
		overflow: visible;
	}

	/* 优化点击区域 */
	.forget-password,
	.register-link,
	.link {
		padding: 8rpx 4rpx;
	}

	/* 禁用用户选择 */
	.title-main,
	.btn-login,
	.wechat-login {
		user-select: none;
		-webkit-user-select: none;
	}

	/* 修复按钮默认样式 */
	button {
		line-height: 1;
	}

	button:after {
		border: none;
	}
</style>